<template>
	<view class="my-btn" :class="[ gold?'gold':'', size=='lg' ? 'lg' : '', size=='md' ? 'md' : '', size=='sm' ? 'sm' : '', size=='xs' ? 'xs' : '', canClick?'':'gray' ]"
	 :style="{ background: bgColor }" @click="onClick">
		<slot></slot>
	</view>
</template>

<script>
	export default {
		props: {
			gold: {
				type: Boolean,
				default: false
			},
			size: {
				type: String,
				default: 'lg'
			},
			bgColor: {
				type: String,
				default: ''
			},
			disabled: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				canClick: true,
			};
		},
		watch: {
			disabled(val) {
				this.canClick = !val
			}
		},
		mounted() {
			this.canClick = !this.disabled
		},
		methods: {
			onClick() {
				if (this.canClick) {
					this.$emit('click')
				}
			}
		}
	}
</script>

<style lang="scss">
	.my-btn {
		font-size: 32rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
		border-radius: 8rpx;
		letter-spacing: 4rpx;
		display: flex;
		justify-content: center;
		align-items: center;

		&.lg {
			width: 670rpx;
			height: 88rpx;
			margin-left: auto;
			margin-right: auto;
		}
		
		&.md {
			width: 600rpx;
			height: 88rpx;
		}

		&.sm {
			width: 500rpx;
			height: 88rpx;
		}

		&.gold {
			background: linear-gradient(270deg, rgba(225, 165, 94, 1) 0%, rgba(255, 215, 166, 1) 100%);
		}

		&.gray {
			background: rgba(232, 232, 232, 1);
			color: rgba(153, 153, 153, 1);
		}
	}
</style>
